<template>
    <div class="charts-container" :class="{'scroll': isHasScroll}">
        <el-row>
            <el-col :span="12">
                <div class="charts-box charts-count">
                    <el-row :gutter="16">
                        <el-col :span="12">
                            <div :class="{'c-box': true, 'active': counts_type == 'followNum'}">
                                <div class="title">
                                    {{countsArr.followNum.label}} 
                                    <el-tooltip effect="dark" :content="countsArr.followNum.tooltipText" placement="top"><i class="el-icon-question"></i></el-tooltip>
                                </div>
                                <div class="count" v-html="formatter(countsArr.followNum.num)" @click="handleUpdateCharts('followNum')"></div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div :class="{'c-box': true, 'active': counts_type == 'removeDuplicate'}">
                                <div class="title">
                                    {{countsArr.removeDuplicate.label}}
                                    <el-tooltip effect="dark" :content="countsArr.removeDuplicate.tooltipText" placement="top"><i class="el-icon-question"></i></el-tooltip>
                                </div>
                                <div class="count" v-html="formatter(countsArr.removeDuplicate.num)" @click="handleUpdateCharts('removeDuplicate')"></div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="charts-bar">
                        <charts-bar :dataArr="dataArr1" :showParticleSize="showParticleSize" container="c1" :hasType="false"></charts-bar>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="12" class="el-col-right">
                <div class="charts-box">
                    <div class="charts-header">
                        <div class="charts-title">
                            单客户互动频次
                            <el-tooltip effect="dark" content="单天顾问与客户的聊天总数除以互动客户总数" placement="top"><i class="el-icon-question"></i></el-tooltip>
                        </div>
                        <div class="charts-date-type">
                            <date-picker @getData="getCustomerMsg" :isCustom="false"></date-picker>
                        </div>
                    </div>
                    <div class="charts-content" style="padding-top:0px;">
                        <charts :dataArr="dataArr2" :showParticleSize="showParticleSize" container="c2" :hasType="false"></charts>
                    </div>
                </div>
                <div class="charts-box">
                    <div style="height: 85%;">
                        <charts-pie :dataArr="dataArr3" container="c3" :hasType="false"></charts-pie>
                    </div>
                    <div class="charts-title2">
                        客户手机号备注率 
                        <el-tooltip effect="dark" content="反映手机号备注信息的维护完整度" placement="top"><i class="el-icon-question"></i></el-tooltip>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!--div class="charts-box">
            <div class="charts-header">
                <div class="charts-title">
                    客户互动人数
                    <el-tooltip effect="dark" content="员工主动发送过消息的单聊总客户人数" placement="top"><i class="el-icon-question"></i></el-tooltip>
                </div>
                <div class="charts-date-type">
                    <date-picker @getData="getCustomerPeople" :isCustom="false"></date-picker>
                </div>
            </div>
            <div class="charts-content">
                <charts :dataArr="dataArr4" :showParticleSize="showParticleSize" container="c4" :hasType="false"></charts>
            </div>
        </div-->
        <div class="charts-box" style="height: 442px">
            <div class="charts-content" style="padding-top: 0;height: 100%">
                <Lists/>
            </div>
        </div>
    </div>
</template>
<script>
import datePicker from '../datePicker.vue';
import charts from '../charts.vue';
import chartsBar from '../charts-bar.vue';
import chartsPie from '../charts-pie.vue';
import Lists from './customers-lists.vue';
import { formatterNumber, getChartMin2 } from "@/common/js/util.js";
export default {
    data() {
        return {
            dataTypeArr: [
                {label: '客户互动人数', value: 0}
            ],
            showParticleSize: false,    // 粒度控件
            searchContent: {
                data_type: 0,         // 类型
                begin_date: null,
                end_date: null
            },
            counts_type: 'followNum',
            countsArr: {
                followNum: {label: '客户总数', num: 0, tooltipText: '当前所有已绑定企业微信商家中所拥有的客户总数累加', data: []},
                removeDuplicate: {label: '去重客户总数', num: 0, tooltipText: '每家店总客户数中剔除不同员工添加的相同客户数后的总和', data: []}
            },
            dataArr1: {
                type: 'column',
                xAxis: {
                    lineWidth: 1,
                },
                yAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 1,
                    tickAmount: 6,
                },
                legend: {
                    enabled: true
                },
                dataLabels: true,
                plotOptions: {
                    column: {
                        borderRadius: 2,
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                //[0, '#F4DB42'],
                                //[1, '#FE9291'],
                                [0, '#4293F4'],
                                [1, 'rgb(66, 147, 244, 0.2)']
                            ],
                        },
                    }
                },
                labelFormat: 'MM-DD',
                tooltip: true,
                init: true, // true 表示每次加载都重新初始化
                series: []
            },
            dataArr2: {
                labelFormat: 'MM-DD',
                yAxis: {
                    tickAmount: 5,
                },
                tooltip: {
                    valueSuffix: ' 次'
                },
                _formatterNum: val => {
                    return formatterNumber(val, 10000, 2, true)
                },
                series:  []
            },
            dataArr3: {
                series:  []
            },
            dataArr4: {
                labelFormat: 'MM-DD',
                tooltip: {
                    valueSuffix: ' 人'
                },
                series:  []
            },
            isHasScroll: false,
            dateDataType: null,
            date_interval: [],
            admin_is_super: 0,
            admin_id: 0
        }
    },
    components: { datePicker, charts, chartsBar, chartsPie, Lists },
    methods: {
        // 客户总数、手机备注率
        getCustomerTotal(dateInterval = null) {
            let datas = {
                start_time: this.searchContent.date[0],
                end_time: this.searchContent.date[1]
            }
            this.$http.get('/admin/store/index.php?act=followUser&op=detail', {params: datas}).then(res => {
                const counts = {
                    followNum: 0,           // 客户总数
                    removeDuplicate: 0      // 去重客户总数
                }
                // 重置数据
                const countsArr = this.countsArr
                for(let [key, value] of Object.entries(this.countsArr)) {
                    this.countsArr[key].num = 0
                }
                if(res.code == 1) {
                    counts.followNum = res.data.followNum
                    counts.removeDuplicate = res.data.removeDuplicate
                }
                for(let [key, value] of Object.entries(counts)) {
                    this.animation(countsArr, value, key)
                }
                this.countsArr.followNum.data = res.data.dayInfo.map(item => ([item.date, parseInt(item.sum)])) || []
                this.countsArr.removeDuplicate.data = res.data.removeDupDayInfo.map(item => ([item.date, parseInt(item.sum)])) || []

                // 更新charts图表
                this.handleUpdateCharts('followNum') // 默认取客户总数

                // 客户手机号备注率
                let remarkMobilesRate = 0
                if(res.data.remarkMobilesRate) remarkMobilesRate = res.data.remarkMobilesRate
                this.dataArr3 = {
                    percentage: remarkMobilesRate.toFixed(2),
                    tooltip: false,
                    enabled: false,
                    legend: false,
                    innserSize: '72%',
                    colors: ['#FF5A5A', '#F4CA42'],
                    series: [{
                        name: '客户手机号备注率',
                        color: '#FF5A5A',
                        data: [
                            ["已备注", 1000 * remarkMobilesRate],
                            ['未备注', 1000 * (100 - remarkMobilesRate)],
                        ]
                    }]
                }
            })
        },
        handleUpdateCharts(type) {
            this.counts_type = type
            getChartMin2(this.countsArr[this.counts_type].data, this.dataArr1)
            this.dataArr1.series = [{
                name: this.countsArr[this.counts_type].label,
                data: this.countsArr[this.counts_type].data || [],
            }]
        },
        // 平均互动聊天消息数
        getCustomerMsg(dateInterval = null) {
            let datas = this.searchContent;
            if(dateInterval) {
                datas.data_type = 2
                datas.start_time = dateInterval[0];
                datas.end_time = dateInterval[1];
            }
            this.$http.get('/admin/store/index.php?act=followUser&op=messageCnt', {params: datas})
            .then(res => {
                if(res.code == 1) {
                    this.dataArr2.series = [{
                        name: '互动频次',
                        color: '#ff9900',
		                data: res.data.map(item => ([item.stat_time, item.message_cnts])) || [],
                    }];
                }
            })
        },
        // 获取客户互动人数
        getCustomerPeople(dateInterval = null) {
            let datas = this.searchContent;
            if(dateInterval) {
                datas.data_type = 2
                datas.start_time = dateInterval[0];
                datas.end_time = dateInterval[1];
            }
            this.$http.get('/admin/store/index.php?act=followUser&op=chatCnt', {params: datas})
            .then(res => {
                if(res.code == 1) {
                    this.dataArr4.series = [{
                        name: '互动人数',
                        color: '#FF5A5A',
		                data: res.data.map(item => ([item.stat_time, parseFloat(item.chat_cnts)])) || [],
                    }];
                }
            })
        },
        animation(countsArr, data, key) {
            if(data < 0) {
                countsArr[key].num = "暂无"
                countsArr[key].class = true
                return
            }
            let value = 0
            if(countsArr[key].percentage) {
                value =  (data / 120).toFixed(4) * 1 // 计算单次需要增加的数值
            } else {
                value =  Math.ceil(parseInt(data) / 120) // 计算单次需要增加的数值
            }
            let timer = setInterval(() => {
                if(countsArr[key].num + value < data) {
                    countsArr[key].num = parseInt((countsArr[key].num + value) * 100) / 100
                } else {
                    countsArr[key].num = parseInt(data * 100) / 100
                    clearInterval(timer)
                }
            }, 2)
        },
        formatter(num) {
            return formatterNumber(num, 100000, 2, true, true)
        },
        // 初始化表单
        handleDefault() {
            // 取最近7天日期(不含当天)
            const date = new Date()
            date.setDate(date.getDate() - 1)
            // date.setDate(date.getDate())
            const end = this.$options.filters['dateFormatter'](date.getTime(), "YYYY-MM-DD")
            date.setDate(date.getDate() - 6)
            const begin = this.$options.filters['dateFormatter'](date.getTime(), "YYYY-MM-DD")
            this.searchContent.date = [begin, end]
            this.getCustomerTotal()
        },
    },
    mounted() {
        this.handleDefault()
    }
}
</script>
<style scoped lang="scss">
    @import url('~@/common/scss/charts-public.scss'); 
    @font-face {
        font-family: 'DIN Condensed Bold';
        src: url('~@/assets/font/DIN-Condensed.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    .charts-container {
        box-shadow: none;
        // width: 100%;
        width: calc(100% + 10px);
        height: calc(100% - 29px);
        margin: 0 -5px;
        padding-right: 3px;
        .el-tooltip {
            color: #bbb;
            font-size: 16px;
            cursor: pointer;
        }
        >.el-row {
            height: 620px;
            margin-top: 2px;
            >.el-col {
                height: 100%;
                .charts-box {
                     height: calc(100% - 15px);
                }
                &:first-child{padding-right:3px;}
            }
            .el-col-right {
                display: flex;
                align-items: space-between;
                justify-content: space-between;
                flex-direction: column;
                box-sizing: border-box;
                padding: 16px 5px 0px 7px;
                .charts-box {
                    height: calc(50% - 8px);
                    margin: 0px;
                    /deep/.charts-content {
                        height: calc(100% - 38px);
                    }
                }
            }
        }
    }
    .charts-box {
        background: #fff;
        box-shadow: 0px 0px 10px #ddd;
        box-sizing: border-box;
        height: calc(100% - 30px);
        height: 410px;
        margin: 15px 5px;
        position: relative;
        .charts-content {
            padding-top: 10px;
            /deep/ .chart-content { padding-bottom: 10px;}
        }
    }
    .charts-bar {
        height: 385px;
    }
    .charts-title2 {
        text-align: center;
        padding-left: 16px;
        font-weight: bold;
        font-size: 14px;
    }
    .charts-count {
        padding: 12px;
        .el-col {
            height: 220px;
            .c-box {
                height: 100%;
                overflow: hidden;
                cursor: pointer;
                box-sizing: border-box;
                &.active .count {
                    background: #4293F4;
                    padding-bottom: 2px;
                    color: #fff;
                    border: 0;
                } 
            }
            .title {
                border: 1px solid #eee;
                border-radius: 4px 4px 0 0;
                border-bottom: 0;
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;
                align-items: center;
                background:#f5f5f5;
                padding:11px 12px 13px;
                line-height: 100%;
                font-size:14px;
                transition: background .3s;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-weight: bold;
            }
            .count {
                border: 1px solid #eee;
                border-radius: 0 0 4px 4px;
                border-top: 0;
                display: flex;
                justify-content: center;
                box-sizing: border-box;
                align-items: center;
                font-size: 42px;
                height: calc(100% - 42px);
                color: #444;
                font-family: 'DIN Condensed Bold';
                transition: background .3s;
                /deep/ font { 
                    font-size: 16px;
                    margin-left:4px;
                    font-family: '微软雅黑';
                    margin-top: 12px;
                }
            }
        }
    }
</style>